
<template>
  <div class="content">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>收费管理</a-breadcrumb-item>
        <a-breadcrumb-item>停车记录</a-breadcrumb-item>
        <a-breadcrumb-item>订单详情</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <!-- 表单 -->
    <div class="box-form">
      <div style="height:50px;"></div>
      <!--基本信息-->
      <div class="box-tool">
        <div>基本信息</div>
        <div style="display: flex">
          <a-button @click="closeTip" icon="plus-circle">二次识别</a-button> &nbsp;
          <a-button @click="back" icon="rollback">返回</a-button>
        </div>
      </div>
      <div class='box-base'>
          <div  class="cell">
            <div class="titleName">
            路段
            </div>
            <template>
              <div class="dateName">{{data.street}}</div>
            </template>
          </div>
          <div  class="cell">
            <div class="titleName">
            市、区
            </div>
            <template>
              <div class="dateName">{{data.city}}</div>
            </template>
          </div>
          <div  class="cell">
            <div class="titleName">
            停车点
            </div>
            <template>
              <div class="dateName">{{data.parkName}}</div>
            </template>
          </div>
          <div  class="cell">
            <div class="titleName">
            入场时间
            </div>
            <template>
              <div class="dateName">{{data.startTime}}</div>
            </template>
          </div>
            <div  class="cell">
            <div class="titleName">
            离场时间
            </div>
            <template>
              <div class="dateName">{{data.endTime}}</div>
            </template>
          </div>
            <div  class="cell">
            <div class="titleName">
            停车时长
            </div>
            <template>
              <div class="dateName">{{data.sumTime}}</div>
            </template>
          </div>
           <div class="cell">
            <div class="titleName">
            泊位号
            </div>
            <template>
              <div class="dateName">{{data.truckSpaceName}}</div>
            </template>
          </div>
          <div  class="cell">
            <div class="titleName">
            车牌
            </div>
            <template>
              <div class="dateName">{{data.licencePlate}}</div>
            </template>
          </div>
      </div>
      <!-- 订单详情 -->
      <div class="box-tool">
        <div>订单详情</div>
      </div>
      <div class='box-base'>
        <div class="order Header">订单号</div>
        <div class="order Header">生成时间</div>
        <div class="order Header">状态</div>
        <div class="order Header">应付</div>
        <div class="order Header">实付</div>
        <div class="order Header">欠费</div>
        <div class="order">{{data.order}}</div>
        <div class="order">{{data.orderTime}}</div>
        <div class="order">
          <!-- 1：等待 2：成功 3：取消 4：失败 5：支付进行中', -->
          <div v-if="data.status==1">待缴费</div>
          <div v-if="data.status==2">成功</div>
          <div v-if="data.status==3">订单取消</div>
          <div v-if="data.status==4">失败</div>
          <div v-if="data.status==5">支付中</div>
        </div>
        <div class="order">{{data.shouldMoney/100}}</div>
        <div class="order">
          <div v-if="data.payableMoney ==''">0</div>
          <div v-if="data.payableMoney !=''">{{data.payableMoney/100}}</div>
        </div>
        <div class="order">{{parseFloat((data.shouldMoney-data.payableMoney)/100).toFixed(2)}}</div>
      </div>
      <!-- 图片信息 -->
       <div class="box-tool">
        <div>入场图片</div>
      </div>
      <div class='image'>
        <div  class="images" v-for="message in inUrl" :key="message" :value="message">
        <img :src="message" class="imagediv"/>
        <div><a :href="message" target="_Blank">查看大图</a></div>
        </div>
      </div>
      <div class="box-tool">
        <div>取证图片</div>
      </div>
      <div class='image'>
        <div  class="images" v-for="message in fUrl" :key="message" :value="message">
        <img :src="message" class="imagediv"/>
        <div><a :href="message" target="_Blank">查看大图</a></div>
        </div>
      </div>
      <div class="box-tool">
        <div>出场图片</div>
      </div>
      <div class='image'>
        <div  class="images" v-for="message in outUrl" :key="message" :value="message">
        <img :src="message" class="imagediv"/>
        <div><a :href="message" target="_Blank">查看大图</a></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ParkingRecordApi from '../../api/charge/ParkingRecord';
  export default {
    name: "order",

    /*数据层*/
    data() {
      return {
        id:'',
        data:{
          licencePlate:'',
          comeInUrl:'',
          getOutUrl:'',
          forensicsUrl:[],
          truckSpaceName:'',
          parkName:'',
          endTime:'',
          startTime:'',
          shouldMoney:'',
          sumTime:'',
          city:'',
          area:'',
          street:'',
          orderTime:'',
          order:'',
          status:'',
          payableMoney:''
        },
        inUrl:[],
        outUrl:[],
        fUrl:[]
      }
    },
    mounted(){
      let obj = this.$route.query.id;
      this.id=obj;
      // 获取数据
      ParkingRecordApi.getOrderDetail({"id":this.id}).then(res=>{
        this.data=res.data;
        var l = res.data.street.split('市')[0].length;
        this.data.street = res.data.street.substring(l+1);

        if(res.data.comeInUrl){
          let array = res.data.comeInUrl.split(',').map(item => {
              if(item != 'none'){
                  return item;
              }
          })
          this.inUrl.push(...array);
        }
        if(res.data.getOutUrl){
          let array = res.data.getOutUrl.split(',').map(item => {
              if(item != 'none'){
                  return item;
              }
          })
          this.outUrl.push(...array);
        }

        if(res.data.forensicsUrl){
          var ob = res.data.forensicsUrl;
          for(let i in ob){
            var im = ob[i].images;
            let array = im.split(',').map(item => {
                if(item != 'none'){
                    return item;
                }
            })
            this.fUrl.push(...array);
          }
        }
      })
    },
    /*方法层*/
    methods: {
      back(){
        let _this = this;
        _this.$router.push({ path: '/charge/parkingRecord'});
      },
      closeTip(){
        this.$message.success("操作成功！");
      }
    },
  }
</script>

<style scoped>
.images{
  float: left;
  width: 24%;
  /* margin-right:20px ; */
  margin-bottom:20px ;
  margin-top:20px ;
}
.images img{width:80%; height:250px}
.image{
  width: 100%;
  min-height: 100px;
}
.order{
  width: 16.66%;
  height: 41px;
  float: left;
  text-align: center;
  line-height: 41px;

}
.Header{
  background-color: rgb(236, 236, 236);
}
.cell{
    float: left;
    width: 33.33%;
}
.cell,.order{
  border-bottom:solid 1px rgb(180, 190, 190);
  border-left: solid 1px rgb(180, 190, 190);
  border-right: solid 1px rgb(180, 190, 190);
}
.titleName{
  width: 40%;
  height: 41px;
  text-align: center;
  line-height:41px;
  float: left;
  background-color: rgb(198, 206, 206);
}
.box{
  background-color: rgb(224, 219, 219);
  height: 41px;
    padding-top: 11px;
  /* margin: 8px 0; */
  width: 100%; /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dateName{
   line-height:41px;
}
.content {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow-x:auto
}

.header-setting {
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  padding-bottom: 40px;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  /* min-height: 1005px; */
  /* background: #fff; */
  margin-top: 8px;
}
.box-tool{
  line-height: 25px;
  background-color: rgb(219, 231, 231);
  border-bottom: 1px solid rgb(198, 206, 206);
}
.box-form .box-tool {
  padding-top: 11px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-base{
  width: 100%;
  height:180px;
  margin-bottom: 5px;
}
</style>
